<template>
  <div class="all">
    <div>
      <p>任务名称：task_board_bwjt_run_xservice_0612</p>
      <p>TSS项目名:EPLAT</p>
    </div>
    <el-timeline>
      <el-timeline-item timestamp="2018/4/12" placement="top" type="primary" size="large">
        <el-card>
          <div @click="show()">
            <h4>实例状态：成功</h4>
            <p>时间:2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000</p>
            <p>是否结束:结束</p>
          </div>

        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/3" placement="top" type="success" size="large">
        <el-card>
          <div @click="show()">
            <h4>实例状态：进行中</h4>
            <p>时间:2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000</p>
            <p>是否结束:未结束</p>

          </div>

        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/2" placement="top" type="danger" size="large">
        <el-card>
          <div @click="show()">
            <h4>实例状态：失败</h4>
            <p>时间:2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000</p>
            <p>是否结束:结束</p>
          </div>

        </el-card>
      </el-timeline-item>
    </el-timeline>
    <TimeLine2></TimeLine2>
    <TimeLine3></TimeLine3>
    <TimeLine4></TimeLine4>
    <el-dialog title="日志详情" :visible.sync="dialogTableVisible">
      <p>日志内容XXXX</p>
      <p>日志内容XXXX</p>
      <p>日志内容XXXX</p>
      <p>日志内容XXXX</p>
      <p>日志内容XXXX</p>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import TimeLine2 from "./TimeLine2"; //根据自己的项目路径
import TimeLine3 from "./TimeLine3"; //根据自己的项目路径
import TimeLine4 from "./TimeLine4"; //根据自己的项目路径
function tt() {
  alert();
}
export default {
  name: "",
  // import引入的组件需要注入到对象中才能使用
  components: {
    TimeLine2,
    TimeLine3,
    TimeLine4,
  },
  data() {
    // 这里存放数据
    return {
      dialogTableVisible: false,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
    show() {
      this.dialogTableVisible = true;
    },
  },
};
</script>

<style scoped>
.all {
  margin-top: 30px;
  padding: 20px;
  width: 500px;
  /* background-color: #f0f0f0; */
}
.el-card {
  cursor: pointer;
}
</style>
